<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer">
    <link rel="icon" href="/assets/img/logo.webp" type="image/*" />
    <link href="assets/css/style.css" rel="stylesheet" type="text/css">
    <link href="assets/css/APlayer.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/highlight.github.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/custom.css" rel="stylesheet" type="text/css">
    <title>Memos Top</title>

</head>

<body>
    <header>
        <div class="menu">
            <div class="title">Memos</div>

            <div class="pages">
                    <a href="https://github.com/kkbt0/pocketbase-whispers" target="_blank" rel="noopener noreferrer" class="">GitHub</a>
            </div>

        </div>
        
        <div class='theme-toggle'>🌓</div>

    </header>

    <section id="main" class="container">
        <h1>Memos Top</h1>

        <blockquote>
            <p>Welcome! This is a demo html page for pocketbase api! You can set your api host on this index.html line 70 . 
                Example: <br><a href="https://pocketbase.io/api/collections/posts/records">https://pocketbase.io/api/collections/messages/records</a><br>
                <br>This example use fields <strong>description</strong> and <strong>created</strong> . You can search <strong>PocketBase字段</strong> to find what fields I use in main.js.
                <br><br>
                If you want to use this example without mod fileds in main.js. You can create your own Collections which have fields <strong>description</strong> and <strong>created</strong> on Pocketbase Admin dashboard UI.
                And do not forget to set the Collection API Rules List/Search rule empty .
            </p>
        </blockquote>

        <div class="total">Total <span id="total">0</span> Memos 🎉</div>

        <blockquote id="tag-filter" class="filter">
            <div id="tags"></div>
        </blockquote>

        <div id="memos" class="memos">
            <!-- Memos Container -->
        </div>

    </section>

    <footer class="markdown-body footer">
        <p>Copyright @
            <script>
                document.write(new Date().getFullYear())
            </script><a href="https://example.com/" target="_blank" rel="noopener noreferrer" class="hidden">SomeOne</a> All Rights Reserved.
        </p>

    </footer>

    <!-- Your Memos API -->
    <script type="text/javascript">
        var memos = {
            host: 'https://pocketbase.io/api/collections/posts/records',  // Your Memos, with '/' end.
            limit: '10',  // Pagination to show.
            domId: '#memos',  // Default #memos.
            username: 'Pocketbase',  // You can customize the display ID that is not related to memos.
            name: 'Official Demo',  // You can customize the displayed full name, that is not related to memos.
        }

    </script>
    <script type="text/javascript" src="assets/js/lazyload.min.js?v=17.8.3"></script>
    <script type="text/javascript" src="assets/js/marked.min.js?v=4.2.2"></script>
    <script type="text/javascript" src="assets/js/view-image.min.js"></script>
    <!-- <script type="text/javascript" src="assets/js/pangu.min.js?v=4.0.7"></script> -->
    <script type="text/javascript" src="assets/js/moment.min.js?v=2.29.4"></script>
    <script type="text/javascript" src="assets/js/moment.twitter.js"></script>
    <script type="text/javascript" src="assets/js/APlayer.min.js"></script>
    <script type="text/javascript" src="assets/js/Meting.min.js"></script>
    <script type="text/javascript" src="assets/js/highlight.min.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>
    <script type="text/javascript" src="assets/js/custom.js"></script>
    <script>hljs.highlightAll();</script>
</body>

</html>
